<?php $this->load->module('index/index/head',array());?>
<?php $data = $val ;?>
<!--订单详情确认-->
<div class="content">
    <form action="<?php echo $next_url;?>" method="post" class="formvalidate">
    <div class="order_content">
        <div class="order_content_tp">订单详情确认</div>
        <div class="order_content_bp">
            <div class="order_title order_margin">【<?php echo $data['line_info']['short_name'];?>】<?php echo $val['line_info']['line_name'];?></div>
            <div class="order_con">

                <div class="order_con_bp" id="js-price-list">

                    <table border="0">
                        <tr class="order_top_list">
                            <td width="130" class="order_top_list_chujing">产品类型</td>
                            <td width="530">产品信息</td>
                            <td width="175">游玩时间</td>
                            <td width="165">人数</td>
                            <td width="130">单价</td>
                        </tr>
                        <?php if(isset($data['price_list']) && ! empty($data['price_list'])):?>
                        <?php foreach($data['price_list'] as $key=>$val):?>
                                <tr class="order_top_list_t_con">
                                    <td></td>
                                    <?php if( ! $key):?>
                                        <td><?php echo $data['line_info']['line_name'];?></td>
                                        <td><?php echo $data['go_info']['go_date'];?></td>
                                    <?php else:?>
                                        <td></td>
                                        <td></td>
                                    <?php endif ;?>
                                    <td><div class="order_chen_lt"><?php echo $val['price_name']?>：</div>
                                        <div class="order_chen_rt">
                                            <input  maxlength="2" class="js-number-input" name="price_num[<?php echo $key;?>]" value="<?php echo $val['num'];?>"/>
                                            <input type="hidden" name="price_id[<?php echo $key;?>]" value="<?php echo $val['price_id'];?>" />
                                            <input type="hidden" class="js-unit-price" value="<?php echo $val['price'];?>" />
                                        </div>
                                    </td>
                                    <td class="order_prise">￥<?php echo $val['price']?></td>
                                </tr>
                        <?php endforeach;?>
                        <?php endif;?>
                    </table>
                </div>
            </div>
        </div><div class="order_jine">合计金额：<span class="js-total-ptice"></span></div>
        <div class="order_kefu_content" >
            <div class="order_con">
                <div class="order_con_bp">
                    <div class="order_con_kehu_tp">客户信息</div>
                    <div class="order_con_kehu_bp" id="js-customer-info">
                        <div class="order_con_kehu_xinxi">
                            <div class="order_con_kehu_xinxi_lt order_lianximar">联系人</div>
                            <div class="order_con_kehu_xinxi_rt">
                                <ul class="order_xianxi">
                                    <li class="xinxi_line"><span>联系人：</span>
                                        <input type="text" name="contact_name"  placeholder="请填写联系人姓名" validate="{required:true}" />
                                    </li>
                                    <li class="xinxi_line"><span>手机号码：</span>
                                        <input type="text" name="contact_phone_num" placeholder="请填写手机号码"  validate="{required:true,isMobile:true}"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="order_con_kehu_xinxi order_con_kehu_butt js-tourist-info js-tourist-key-info">
                            <div class="order_con_kehu_xinxi_lt order_lianximar js-tourist-head-title">游客1</div>
                            <div class="order_con_kehu_xinxi_rt">
                                <ul class="order_xianxi">
                                    <li class="xinxi_line"><span>中文姓名：</span>
                                        <input type="text" name="name[0]" class="js-tourist-name-input" placeholder="姓名" validate="{required:true}"/>
                                    </li>
                                    <li class="xinxi_line"><span>手机号码： </span>
                                        <input type="text" name="phone_num[0]" class="js-tourist-phone-input" placeholder="手机号码"  validate="{isMobile:true,required:true}"/>
                                    </li>
                                    <li class="xinxi_line"><span>证件类型： </span>
                                        <select name="id_card_type[0]" class="js-tourist-card-type-select">
                                            <option value="1">身份证</option>
                                            <option value="2">护照</option>
                                            <option value="3">军官证</option>
                                        </select>
                                        </select><input type="text" name="id_number[0]" class="js-tourist-id-input" validate="{required:true}" placeholder="证件号码" />
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="order_pries">
        <div class="order_pries_lt2"><a href="javascript:history.go(-1)">〈返回上一步</a><span>应付总额：</span><span class="jiage js-total-ptice"></span></div>
        <div class="order_pries_rt">
            <div class="order_pries_rt_quren"><button type="submit">点击确认</button></div>
        </div>
    </div>
    </div>
    <input type="hidden" name="act" value="step_1" />
    <input type="hidden" name="line_id" value="<?php echo $data['line_info']['line_id']?>" />
    <input type="hidden" name="go_id" value="<?php echo $data['go_info']['go_id']?>" />
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $.extend({
            calculate_count: function () {
                var count = 0;
                $('#js-price-list').find('.js-number-input').each(function (i, e) {
                    count += parseInt($(e).val());
                })
                return count;
            }
        })

        $.extend({
            initialize_tourist_input: function (i, e) {
                $('#js-customer-info').find('.js-tourist-info').each(function (i, e) {
                     $(e).find('.js-tourist-head-title').text('游客'+(parseInt(i)+1));
                     $(e).find('.js-tourist-name-input').attr('name', 'name['+i+']');
                     $(e).find('.js-tourist-phone-input').attr('name', 'phone_num['+i+']');
                     $(e).find('.js-tourist-id-input').attr('name', 'id_number['+i+']');
                     $(e).find('.js-tourist-card-type-select').attr('name', 'id_card_type['+i+']');
                })
            }
        })
        $.extend({
            process_tourist_dom: function (count) {
                var exist_count = $('#js-customer-info').find('.js-tourist-info').size();
                var clone = '<div class="order_con_kehu_xinxi order_con_kehu_butt js-tourist-info">' +
                    $(".js-tourist-key-info:eq(0)").clone().html() +
                    '</div>';
                if (count > exist_count) {
                    for (var i = 0; i < (count - exist_count); i++) {
                        $('#js-customer-info').append(clone);
                    }
                }

                if (count < exist_count) {
                    var step =   parseInt(count);
                    $('#js-customer-info').find('.js-tourist-info').each(function (i, e) {
                        if ((i + 1) > step){
                            $(e).remove();
                        }
                    })
                }
                $.initialize_tourist_input();
            }
        })

        $.extend({
            calculate_price: function () {
                var total_price = 0;
                $('#js-price-list').find('.js-number-input').each(function (i, e) {
                    var unit_price = $(e).siblings('.js-unit-price').val();
                    var count = $(e).val();
                    total_price += parseInt(count) * parseInt(unit_price);
                })
                $('.js-total-ptice').text('￥' + total_price);
            }
        })

        $('.js-number-input').blur(function () {
            var count = $.calculate_count();
            if ( ! count ) {
                $(this).focus().val(1);
                count = 1;
            }
            $.calculate_price();
            $.process_tourist_dom(count);
        })

        $.calculate_price();
        $.process_tourist_dom($.calculate_count());
    })
</script>
<?php $this->load->module('index/index/order_footer');?>